<template>
  <a-card :bordered="false">
    <a-form :form="form" layout="inline">
      <a-row class="systemSettings_item">
        <h3 class="systemSettings_item_title">客服电话</h3>
        <a-col :span="9" :offset="1">
          <p class="systemSettings_item_titles"><span>*</span> 电话</p>
          <a-input v-decorator="['note', { rules: [{ required: true, message: '请输入电话!' }] }]" placeholder="请输入电话" v-model="form.phone"/>
        </a-col>
        <a-col :span="9" :offset="1">
          <p class="systemSettings_item_titles"><span>*</span> 描述</p>
          <a-input v-decorator="['note', { rules: [{ required: true, message: '请输入描述!' }] }]" placeholder="请输入描述" v-model="form.des"/>
        </a-col>
        <a-col :span="4" class="systemSettings_item_button_box">
          <a-button size="large" type="primary" @click="postServicePhoneAdd()" class="systemSettings_item_button">提交修改</a-button>
        </a-col>
      </a-row>
      <a-row v-if="false" class="systemSettings_item">
        <h3 class="systemSettings_item_title">一键求助电话</h3>
        <a-col :span="9" :offset="1">
          <p class="systemSettings_item_titles"><span>*</span> 电话</p>
          <a-input v-decorator="['note', { rules: [{ required: true, message: '请输入试验ID!' }] }]" placeholder="请输入电话" />
        </a-col>
        <a-col :span="9" :offset="1">
          <p class="systemSettings_item_titles"><span>*</span> 描述</p>
          <a-input v-decorator="['note', { rules: [{ required: true, message: '请输入试验ID!' }] }]" placeholder="请输入描述" />
        </a-col>
        <a-col :span="4" class="systemSettings_item_button_box">
          <a-button size="large" type="primary" @click="handleEdit(record)" class="systemSettings_item_button">提交修改</a-button>
        </a-col>
      </a-row>

      <a-row v-if="false" class="systemSettings_item">
        <h3 class="systemSettings_item_title">专家预约电话</h3>
        <a-col :span="9" :offset="1">
          <p class="systemSettings_item_titles"><span>*</span> 电话</p>
          <a-input v-decorator="['note', { rules: [{ required: true, message: '请输入试验ID!' }] }]" placeholder="请输入电话" />
        </a-col>
        <a-col :span="9" :offset="1">
          <p class="systemSettings_item_titles"><span>*</span> 描述</p>
          <a-input v-decorator="['note', { rules: [{ required: true, message: '请输入试验ID!' }] }]" placeholder="请输入描述" />
        </a-col>
        <a-col :span="4" class="systemSettings_item_button_box">
          <a-button size="large" type="primary" @click="handleEdit(record)" class="systemSettings_item_button">提交修改</a-button>
        </a-col>
      </a-row>

    </a-form>
  </a-card>
</template>

<script>
import { postServicePhoneAdd, getServicePhone } from '@/api/manage'
export default {
  data () {
    return {
      form: {
        phone: '正在加载中...',
        id: '',
        des: '正在加载中...'
      }
    }
  },
  created () {
    // this.tableOption()
    // getRoleList({ t: new Date() })
    this.getServicePhone()
  },
  methods: {
    getServicePhone () {
      // this.createFormBox = true
      getServicePhone()
        .then(res => {
          const { code, message, data } = res
          console.log('getServicePhone : ' + message)
          if (code === 200) {
            this.form.phone = data.phone
            this.form.id = data.id
            this.form.des = data.des
          }
          // res.data.data = res.data.list
          // return res.data
        })
    },
    postServicePhoneAdd () {
      const body = {
        id: this.form.id,
        phone: this.form.phone,
        des: this.form.des
      }
      postServicePhoneAdd(body).then(res => {
        this.$message.success(res.message)
      })
    }
    // }
  }
}
</script>

<style>
.systemSettings_item {
  margin: 60px 30px;
}
.systemSettings_item_button_box {
  position: relative;
  height: 65px;
}
.systemSettings_item_title {
  font-size: 24px;
  font-weight: bold;
  color: rgba(74, 74, 74, 1);
  line-height: 22px;
  margin-bottom: 30px;
  width: 100%;
}
.systemSettings_item_titles {
  font-size: 16px;
  font-family: PingFangSC-Regular, Microsoft Yahei, sans-serif;
  font-weight: 400;
  color: #000000;
  line-height: 24px;
}
.systemSettings_item_titles span {
  color: rgba(211, 30, 39, 1);
}
.systemSettings_item_button {
  position: absolute;
  bottom: -10px;
  left: 0px;
  right: 0px;
  margin: auto;
  width: 112px;
}
</style>
